import React, { PureComponent, Suspense } from 'react';
import { Layout } from 'antd';
import classNames from 'classnames';
import styles from './index.module.less';
import PageLoading from '../PageLoading';
import { getDefaultCollapsedSubMenus, getMenuStrKeys } from './SiderMenuUtils';
import BaseComp from "../Base/BaseComp";
import BaseMenu from "./BaseMenu";
import {isEmpty} from "lodash-es";

// const BaseMenu = React.lazy(() => import('./BaseMenu'));
const { Sider } = Layout;
let firstMount = true;


export default class SiderMenu extends BaseComp {

    static getDerivedStateFromProps(props, state) {
        const { pathname, flatMenuKeysLen } = state;
        if ((!isEmpty(props.location) && props.location.pathname !== pathname) ||(!isEmpty(props.flatMenuKeys) &&
            props.flatMenuKeys.length !== flatMenuKeysLen)) {
            // console.log('props.location',props.flatMenuKeys)
            return {
                pathname:!isEmpty(props.location)? props.location.pathname:'',
                flatMenuKeysLen: props.flatMenuKeys.length,
                openKeys: getDefaultCollapsedSubMenus(props),
            };
        }
        return null;
    }

    constructor(props) {
        super(props);

        //被选中的菜单
        this.state = {
            openKeys: getDefaultCollapsedSubMenus(props),
        };
    }

    componentDidMount() {
        //firstMount = false;
    }
    isMainMenu = (key) => {
        const { menuData } = this.props;
        return menuData.some((item) => {
            if (key) {
                let itemKey = getMenuStrKeys(item.key, item.path);
                return itemKey === key || item.path === key;
            }
            return false;
        });
    };

    handleOpenChange = (openKeys) => {
        if (openKeys) {
            const moreThanOne = openKeys.filter((openKey) => this.isMainMenu(openKey)).length > 1;
            this.setState({
                openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
            });
        }
    };

    mainRender(context) {
        const { title, logo, collapsed, siderWidth, onCollapse=function () {}, fixSiderbar, theme, isMobile, } = this.props;
        const { global ={} } = this.helpers;
        const { Link } = global;
        const { openKeys } = this.state;
        const defaultProps = collapsed ? {} : { openKeys };

        const siderClassName = classNames(styles.sider, {
            [styles.fixSiderBar]: fixSiderbar,
            [styles.light]: theme === 'light',
        });

        return (
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                breakpoint="xl"
                onCollapse={collapse => {
                    if (firstMount || !isMobile) {
                        onCollapse(collapse);
                    }
                }}
                width={200}
                theme={theme}
                className={siderClassName}
            >
                <div className={styles.logo} id="logo">
                    {
                        !isEmpty(Link)?<Link to="/">
                            <img src={logo} alt="logo"/>
                            <h1>{title}</h1>
                        </Link>:<div>
                            <img src={logo} alt="logo"/>
                            <h1>{title}</h1>
                        </div>
                    }
                </div>
                <Suspense fallback={<PageLoading/>}>
                    <BaseMenu
                        {...this.props}
                        mode="inline"
                        handleOpenChange={this.handleOpenChange}
                        onOpenChange={this.handleOpenChange}
                        style={{ padding: '16px 0', width: !collapsed ? (siderWidth + 8) : '100%', marginLeft: !collapsed ? -8 : 0 }}
                        {...defaultProps}
                    />
                </Suspense>
            </Sider>
        );
    }
}
